<template>
  <!-- 增改用户弹框 -->
  <hcDialog
    dialogWidth="450px"
    dialogTitle="重置密码"
    customClass="hymson-dialog reset-pwd-dialog"
    :isVisable="show"
    :isFooter="true"
    @closeDialog="closeFun"
    @save="saveDialog(formRef)"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      class="reset-pwd-ruleForm"
      label-position="top"
      status-icon
    >
      <el-form-item :label="`请输入${curUser.name}的新密码:`" prop="password">
        <el-input
          v-model="form.password"
          placeholder="请输入"
          type="password"
          maxlength="20"
          show-password
        />
      </el-form-item>
    </el-form>
  </hcDialog>
</template>

<script setup name="ResetPwdDialog">
import { reactive, ref, toRefs } from "vue";
const emit = defineEmits(["onSure", "onCancel"]);

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  curUser: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const formRef = ref();

const data = reactive({
  form: {
    password: "",
  },
  rules: {
    password: [{ required: true, message: "请输入重置密码", trigger: "blur" }],
  },
});

// 添加、修改用户
const saveDialog = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      emit("onSure", {
        data: JSON.parse(JSON.stringify(data.form)),
        id: props.curUser.id,
      });
      closeFun();
    }
  });
};

// 关闭弹框
const closeFun = () => {
  formRef.value.resetFields();
  emit("onCancel");
};

const { form, rules } = toRefs(data);
</script>

<style lang="scss">
.reset-pwd-dialog.el-dialog {
  .reset-pwd-ruleForm {
    padding: 0 20px;
    .el-form-item__label {
      flex: none;
      font-size: 16px;
      font-weight: 600;
    }
    .el-form-item__content {
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>
